<template>
	<view class="mainbgc">
		<u-sticky bgColor="#fafafa">
			<view class="mainpadding" style="position: relative; z-index: 2;">
				<view class="ffffff flexbetween ssbox">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords"
							@confirm="init" confirm-type="search">
					</view>
					<view class="rightss" @click="init()">搜索</view>
				</view>
				<view class="flexleft margin_top">
					<view class="" style="width: 33.33%;">
						<view class="xiaohuang flexleft" @click="cityshow=true">
							<view>{{area_text?area_text:"筛选地区"}}</view>
							<u-icon name="arrow-down" color="#fe7200" size="12"></u-icon>
						</view>
						<!-- <uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="选择地区"
							popup-title="选择地区" v-model="area_id">
							<view class="xiaohuang flexleft">
								<view>筛选地区</view>
								<u-icon name="arrow-down" color="#fe7200" size="5"></u-icon>
							</view>
						</uni-data-picker> -->
					</view>
					<view class="xiaohuang flexcenter" style="width: 33.33%;" @click="yjshow=true">
						<view>{{yjtext || '一级分类'}}</view>
						<u-icon name="arrow-down" color="#fe7200" size="12"></u-icon>
					</view>
					<view class="xiaohuang flexright" style="width: 33.33%;" @click="ejshow=true">
						<view>{{ejtext || '二级分类'}}</view>
						<u-icon name="arrow-down" color="#fe7200" size="12"></u-icon>
					</view>
					<!-- <view class="xiaohuang flexcenter" style="width: 33.33%;" @click="shaixuanShow=true">
						<view>{{checksx}}</view>
						<u-icon name="arrow-down" color="#fe7200" size="5"></u-icon>
					</view>
					<view class="xiaohuang flexright" style="width: 33.33%;" v-if="px_type==2" @click="px_type=px_type==1?2:1">
						<view>排序方式：升序</view>
					</view>
					<view class="xiaohuang flexright" style="width: 33.33%;" v-if="px_type==1" @click="px_type=px_type==1?2:1">
						<view>排序方式：降序</view>
					</view> -->
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexbetween flex_wrap">
				<view class="tehui margin_top" v-for="item in list.data" :key="item.id" style="height: auto;"
					@click="jumpurl('/pages/index/detail?id=',item.id)">
					<view class="tehui" style="width: 100%;">
						<image :src="item.image_text" class="tehuiimage" mode=""></image>
						<view class="fuwulable" v-if="item.is_th==1">特惠</view>
						<view class="rightidnum xiaobai">ID：{{item.id}}</view>
					</view>
					<view class="yihang main_size hei_text margin_top1">{{item.name}}</view>
					<view class="xiaohuang yihang margin_top1" v-if="!is_login" @click.stop="gologin">查看报价</view>
					<view class="xiaohuang yihang margin_top1" v-if="is_login">{{item.price}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="flexleft">
			<scroll-view scroll-y="true" class="scroll-Yleft">
				<view :class="item.id==leftlistid?'itemli-boxf':'itemli-box'" v-for="item in leftlist" :key="item.id" @click="changeleft(item)">
					<view :class="item.id==leftlistid?'itemli-contentf':'itemli-content'">{{item.name}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-Yright ffffff mainpadding2"  scroll-top="0" @scrolltolower="onReachBottomt"
					refresher-threshold="100">
				<view class="flexbetween flex_wrap">
					<view class="tehui margin_top" v-for="item in list.data" :key="item.id" style="height: auto;"
						@click="jumpurl('/pages/index/detail?id=',item.id)">
						<view class="tehui" style="width: 100%;">
							<image :src="item.image_text" class="tehuiimage" mode=""></image>
							<view class="fuwulable" v-if="item.is_th==1">特惠</view>
							<view class="rightidnum xiaobai">ID：{{item.id}}</view>
						</view>
						<view class="yihang main_size hei_text margin_top1">{{item.name}}</view>
						<view class="xiaohuang yihang margin_top1" v-if="!is_login" @click.stop="gologin">查看报价</view>
						<view class="xiaohuang yihang margin_top1" v-if="is_login">{{item.price}}</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- <u-picker :show="shaixuanShow" :columns="columns" @confirm="confirm" @cancel="shaixuanShow=false"></u-picker> -->
		<u-picker :show="yjshow" :columns="yjcolumns" keyName="name" @confirm="yjconfirm"
			@cancel="yjshow=false"></u-picker>
		<u-picker :show="ejshow" :columns="ejcolumns" keyName="name" @confirm="ejconfirm"
			@cancel="ejshow=false"></u-picker>
		<u-picker :show="cityshow" :columns="citycolumns" keyName="text" @confirm="cityconfirm"
			@cancel="cityshow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				items: citys.data,
				city_text: "",
				province_id: "",
				city_id: "",
				area_id: "",
				leftlist: [], //左侧列表
				rightlist: [], //右侧内容
				leftlistid: "", //左侧列表id
				hotfllist: [], //热门分类内容
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				shaixuanShow: false,
				columns: [
					['价格筛选', '时间筛选']
				],
				checksx: "价格筛选",
				px_type: 1, //1降序，2升序
				keywords: "",
				is_login: false,
				// 一级分类
				yjshow: false,
				yjcolumns: [],
				yjid: "",
				yjtext: "",
				// 二级分类
				ejshow: false,
				ejcolumns: [],
				ejid: "",
				ejtext: "",
				cityshow: false,
				citycolumns: [
					[{
						"value": 803,
						"text": "黄浦区",
						"pid": 802
					}, {
						"value": 804,
						"text": "徐汇区",
						"pid": 802
					}, {
						"value": 805,
						"text": "长宁区",
						"pid": 802
					}, {
						"value": 806,
						"text": "静安区",
						"pid": 802
					}, {
						"value": 807,
						"text": "普陀区",
						"pid": 802
					}, {
						"value": 808,
						"text": "闸北区",
						"pid": 802
					}, {
						"value": 809,
						"text": "虹口区",
						"pid": 802
					}, {
						"value": 810,
						"text": "杨浦区",
						"pid": 802
					}, {
						"value": 811,
						"text": "闵行区",
						"pid": 802
					}, {
						"value": 812,
						"text": "宝山区",
						"pid": 802
					}, {
						"value": 813,
						"text": "嘉定区",
						"pid": 802
					}, {
						"value": 814,
						"text": "浦东新区",
						"pid": 802
					}, {
						"value": 815,
						"text": "金山区",
						"pid": 802
					}, {
						"value": 816,
						"text": "松江区",
						"pid": 802
					}, {
						"value": 817,
						"text": "青浦区",
						"pid": 802
					}, {
						"value": 818,
						"text": "奉贤区",
						"pid": 802
					}, {
						"value": 819,
						"text": "崇明县",
						"pid": 802
					}]
				],
				area_text:""
			}
		},
		onLoad() {
			this.getyjfl()
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
		},
		onShareAppMessage: function(options) {
			return {
				title: '制片宝',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		onShareTimeline: function() {
			return {
				title: '制片宝',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			cityconfirm(e) {
				this.area_id = e.value[0].value
				this.area_text = e.value[0].text
				this.init()
				this.cityshow = false
			},
			yjconfirm(e) {
				this.yjid = e.value[0].id
				this.yjtext = e.value[0].name
				this.yjshow = false
				this.ejid = ""
				this.ejtext = ""
				this.getejfl()
				this.init()
			},
			ejconfirm(e) {
				this.ejid = e.value[0].id
				this.ejtext = e.value[0].name
				this.ejshow = false
				this.init()
			},
			gologin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			confirm(e) {
				this.checksx = e.value[0]
				this.shaixuanShow = false
				this.init()
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				let area_text = [area[0].text, area[1].text, area[2].text];
				this.city_text = area_text.join("/")
				this.province_id = area[0].value;
				this.city_id = area[1].value;
				this.area_id = area[2].value;
				this.init()
			},
			changeleft(item) {
				this.leftlistid = item.id
				console.log(this.leftlistid, "999");
				this.init()
			},
			// 获取行业咨询列表
			init(isPage, page) {
				let _this = this;
				console.log(this.leftlistid, "999");
				let data = {
					page: page || 1,
					limit: _this.limit,
					category_id: this.ejid ? this.ejid : this.yjid,
					is_th: 1,
					is_jx: 0,
					province_id: 801,
					area_id: this.area_id,
					city_id: 802,
					// province_id:this.province_id,
					// area_id:this.area_id,
					// city_id:this.city_id,
					keywords: this.keywords,
					createtime_sort: this.checksx != "时间筛选" ? 0 : this.px_type,
					price_sort: this.checksx != "价格筛选" ? 0 : this.px_type
				}
				httpRequest.request('index/cjIndex', 'GET', data, false, false, true).then(res => {
					console.log(this.leftlistid, "999");
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getyjfl() {
				httpRequest.request('index/clCategory', 'GET', {
					is_rec: 0,
					is_hot: 0,
					pid: 0
				}, false, false, true).then(res => {
					if (res.code == 1) {
						// if(this.yjid==""){
						// 	this.yjid = res.data[0].id
						// 	this.yjtext = res.data[0].name
						// }
						this.yjcolumns = []
						this.yjcolumns.push(res.data)
						// this.getejfl()
						this.init()
						// this.leftlist = res.data
						// if (!this.leftlistid) {
						// 	this.leftlistid = res.data[0].id
						// }
					}
				})
			},
			getejfl() {
				httpRequest.request('index/clCategory', 'GET', {
					is_rec: 0,
					is_hot: 0,
					pid: this.yjid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.ejcolumns = []
						this.ejcolumns.push(res.data)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tehui {
		width: 48%;
		position: relative;
		border-radius: 10rpx;
		height: 200rpx;
		overflow: hidden;

		.rightidnum {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
		}

		.tehuiimage {
			width: 100%;
			height: 260rpx;
		}

		.mengban {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			background-color: rgba(0, 0, 0, .3);
		}
	}

	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 10rpx 18rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
		margin-right: 30rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 230rpx);
		width: 190rpx;
	}

	.scroll-Yright {
		height: calc(100vh - 230rpx);
		width: calc(100vw - 190rpx);

	}

	.itemli-boxf {
		padding: 20rpx 15rpx;
		background-color: #fff;
	}

	.itemli-box {
		padding: 20rpx 15rpx;
		background-color: #F9F9F8;
	}

	.itemli-contentf {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		border-left: 2rpx solid #fe7200;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #fe7200;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemli-content {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemfl {
		width: 45%;

	}



	.flimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}

	.leftimg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		flex: 2;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
</style>